<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.js" charset="UTF-8"></script>
<title>Insert title here</title>
</head>
<body>
<form class="layui-form" >
<div class="layui-form-item">
  <label class="layui-form-label">名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">产品编号</label>
  <div class="layui-input-block">
    <input type="text" name="chanpinid" required  lay-verify="required" placeholder="请输入产品" autocomplete="off" class="layui-input">
  </div>
</div>

  <div class="layui-form-item">
  <label class="layui-form-label">简介</label>
  <div class="layui-input-block">
    <input type="text" name=jianjie required  lay-verify="required" placeholder="请输入简介" autocomplete="off" class="layui-input">
  </div>
</div>

 <div class="layui-form-item layui-form-text">
			<label class="layui-form-label">产品图片</label>
			<div class="layui-input-block">
				<button type="button" class="layui-btn" id="img">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
				<img src=" " style ="width:200px; height:200px"/>
			</div>
		</div>

  <div class="layui-form-item">
  <label class="layui-form-label" >产品分类</label>
  <div class="layui-input-block" >
    <select name="fl" lay-verify="" id="fl" >
    <option value="">请选择一个分类</option>
    <option value="床垫">床垫</option>
    <option value="办公桌">办公桌</option>
	<option value="沙发">沙发</option>
	<option value="书柜">书柜</option>
	<option value="木屏">木屏</option>
    </select>
  </div>
</div>
  
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
  </div>
  </form>
  <script src="/static/build/layui.js"></script>
<script>

	//监听提交

	layui.use('upload', function(){
	  var upload = layui.upload;
	   
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#img' //绑定元素
	    ,url: 'CpServlet' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	
	  
	  layui.use('form', function(){
			var form = layui.form;

	  
	  form.on('submit(formDemo)', function(data){
		  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
		  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
		  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
		
		  $.ajax({
				url:"CPtjservlet",//地址
				type:"get",//请求的方式
				data: data.field,
				success: function(res){//成功以后的回调函数
					
					if(res==1){
						alert("成功");
					}else{
						alert("失败");
					}
				}

			}); 
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	  
	  //       表单控件
	  
	  
      layui.use('form', function(){
     var form = layui.form;

  $.ajax({
   url: "CXcpbd",//地址
   type :"get",//请求方式
   success : function(res){
    
    $.each(res.data,function (index,value){
     
     $('#fl').append(
       "<option value="+value.id+">" + value.name
       +"</option>");
    });
   }
   });
  });
  
	  
	});
});

	
</script>

</body>
</html>